<template>
    <div>
        <van-pull-refresh v-model="tabRefreshing" @refresh="tableViewRefresh">
            <van-list v-model="tableViewLoading" :finished="tableViewFinished" :finished-text='requestNoMoreMessage'
                :error-text="requestErrorMessage" @load='tableViewLoadMore' style="margin-bottom: 50px;">

                <van-cell v-for="(item, index) in tableViewDataList" :key="index"
                    @click="cellDidSelectMethod(index, item, '1')">
                    <div>
                        <div class="titlefont"> 里程碑节点: {{ item.milestoneNode }}</div>
                        <div class="infosfont"> 计划完成时间: {{ item.planEndDate }}</div>
                        <div class="infosfont"> 实际完成时间: {{ item.actualDeliveryTime }}</div>
                        <div class="infosfont"> 逾期状态: {{ item.postponeStatus }}</div>
                        <div class="infosfont"> 验收结果: {{ item.checkState = '已完成' ? '已通过' : '未通过' }}</div>
                    </div>
                </van-cell>

                <!-- 请求第一页数据时，出现错误或无数据 展示空白提示界面
                请求后续数据时，只做弹窗提示 -->
                <div v-show="showEmptyView" class="text-c">
                    <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                        style="margin: 120px 50px 0" @click="tableViewRefresh()" />
                </div>

                <div v-show="showErrorView" class="text-c">
                    <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')" alt="获取数据失败"
                        style="margin: 120px 50px 0" @click="tableViewRefresh()" />
                    <div class="color-b font14" style="margin: 20px 0 0 15px">
                        {{ requestErrorMessage }}
                    </div>
                </div>

            </van-list>
        </van-pull-refresh>


        <!-- 发起进度 -->
        <div class="footer">
            <van-button block type="info" native-type="submit" @click="pushXMJDDrawupButtonClick()"
                style="display: inline-block; width: 100%; border: 0px solid #60a9ec">发起进度</van-button>
        </div>

    </div>
</template>

<script>

import { projectProcessModelFindAll, checkProjectProcessStatus } from "@/api/dictapi";
import jDrawupUtil, { DrawupChooseType_SJ, dict_xmbg_code, dict_xmjd_code, dict_xmkg_code, DrawupTransitonType_XMJD } from "../../assets/js/dict_process_helper";
import jTool from "@/assets/js/jHelper";

import { Toast, Dialog } from "vant";
import { Notify } from "vant";
import { mapGetters } from "vuex";
import moment from 'moment'

export default {
    name: 'sjlistview',
    data() {
        return {

            pushParams: {},
            currentPage: 1,
            requestParam: {},
            

            requestNoMoreMessage: '',
            requestErrorMessage: '',

            tableViewDataList: [],
            tabRefreshing: false,
            tableViewLoading: false,
            tableViewFinished: false,


        }
    },

    computed: {
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"]),

        showEmptyView() {

            return this.tableViewDataList.length === 0 && jTool.stringIsEmpty(this.requestErrorMessage);
        },

        showErrorView() {

            return !jTool.stringIsEmpty(this.requestErrorMessage);
        },
    },

    created() {

    },

    mounted() {

    },

    activated() {

        
    },


    beforeRouteEnter(to, from, next) {

        next(vm => {

            // console.log('AA', to, 'AAAA', from);
            // 起草 - 从二级商机列表进来（界面因为保活问题，第二次从商机列表进来的时候 created方法不会重新调用，所以需要确保商机列表进来（或唤醒）时，要刷新起草数据）
            // 通过 `vm` 访问组件实例
            if (to.query.isDrawup == '1' && from.name === 'drawup_transition_tab') {

                vm.pushParams = to.query;
                vm.requestParam = {
                    page: 1, rows: 10, size: 10,
                    projectId: to.query.projectId,  // 项目ID
                    enabled: true,
                };

                vm.tableViewRefresh();
            }
        });
    },

    methods: {

        tableViewRefresh() {

            this.requestParam.page = 1;

            this.tabRefreshing = true;
            this.tableViewLoading = true;
            this.tableViewFinished = false;
            this.requestListDatas();
        },

        tableViewLoadMore() {

            if (!jTool.stringIsEmpty(this.requestNoMoreMessage)) {

                this.tableViewLoading = false
                this.tableViewFinished = true;
            }
            else {

                this.tabRefreshing = false;
                this.requestListDatas();
            }
        },



        requestListDatas() {

            projectProcessModelFindAll(this.requestParam)
                .then((result) => {

                    if (!result.data) {
                        this.tableViewFinished = true;
                        this.requestCompletion('result.message');
                        return;
                    }

                    let listdetails = [];
                    if (result.data.data.content) {
                        listdetails = listdetails.concat(result.data.data.content);
                    }

                    if (this.requestParam.page == 1) {
                        this.tableViewDataList = listdetails;
                    }
                    else {
                        this.tableViewDataList = this.tableViewDataList.concat(listdetails);
                    }

                    if (result.data.data.totalPages <= this.requestParam.page) {
                        this.requestNoMoreMessage = '没有更多数据！';
                        this.tableViewFinished = true;
                    }
                    else {
                        this.requestParam.page++;
                        this.requestNoMoreMessage = '';
                    }

                    this.requestCompletion('');
                })
                .catch((error) => {
                    this.tableViewFinished = true;
                    this.requestCompletion('获取数据失败,请稍后重试');
                });
        },


        requestCompletion(error) {

            this.tabRefreshing = false;
            this.tableViewLoading = false

            if (!jTool.stringIsEmpty(error)) {
                this.requestErrorMessage = error;
                Notify({ type: 'warning', message: error })
            }
        },

        



        /// 项目进度 - 发起进度 详情起草
        pushXMJDDrawupButtonClick() {

            /// 网络请求校验是否可以 发起开工起草
            /// flag: 1 请完成项目交接  2 请完成项目里程碑  3 请完成项目开工  4 可以起草
            Toast.loading({ message: "加载中", forbidClick: false });
            checkProjectProcessStatus(this.pushParams.projectId)
                .then((result) => {

                    Toast.clear();
                    let flag = result.data.data.flag;
                    if (flag == 4) {

                        // 发起进度
                        this.$router.push(
                            {
                                name: 'xmjd',
                                query: this.pushParams
                            }
                        )
                    }
                    else {
                        let message = (flag === 1 ? '请完成项目交接' : (flag === 2 ? '请完成项目里程碑' : (flag === 3 ? '请完成项目开工' : "暂时无法起草")));
                        Dialog.alert({ title: '温馨提示', message: message });
                    }
                })
                .catch((error) => {
                    Toast.clear();
                    Notify({ type: 'warning', message: '起草请求失败,请稍后重试' })
                });
        },


        cellDidSelectMethod(value) {

            // this.$router.push(
            //     {
            //         name: 'srqrdetail',
            //         query: {
            //             processInstId: value.receiptCode,
            //             processDefName: value.processDefName,
            //             location: value.activityDefId,
            //             pmInsId: value.receiptCode,
            //             todoType: todoType,
            //             workItemId: value.wfId,
            //             pmInsType: value.pmInsType,
            //             wfnid: value.wfnid, //待阅使用
            //             isdraw: '0'
            //         }
            //     }
            // )
        }
    }
}
</script>

<style scoped>
.btn {
    margin-bottom: 60px;
    margin-top: 60px;
}

.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}
</style>